<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" oninput="inputHandle(event)">
    <p id='msg'></p>
    <script>    
        var p = document.getElementById('msg')
        /*
        数据到页面的绑定：
        在Vue中，当组件创建时，组件的数据data，通过Object.defineProperty的形式添加到组件对象上，成为组件对象的属性，这些属性是通过set，get函数添加的，在set方法中添加修改DOM的代码实现数据到页面的绑定
        */
        Object.defineProperty(window,'num',{
            set:function(v){
                p.innerText = this.numValue
                this.numValue = v
            },
            get:function(){
                return this.numValue
            }
        })
        /*
        页面到数据的绑定：
        通过监听input事件
        */
        function inputHandle(e){
            window.num = e.target.value
        }

        /*
            Object.defineProperty 给一个对象定义一个属性，这个属性可以高度自定义，
            属性中有set和get方法：
            set  修改时调用
            get  获取时调用
        */
        var o = {}
        Object.defineProperty(o,'name',{
            writable:'false'
        })


    </script>
</body>
</html>